import { useState } from 'react'
import './FrontEditPage.scss'
import { useEffect } from 'react'

const url = 'https://image.ljkjkf.com/intellisiteSystem_TieKe/HeYi/'






const EditWindowData = () => {
    return (
        <div>数据设置</div>
    )
}
const EditWindowLayer = () => {
    return (
        <div>图层设置</div>
    )
}
const EditWindowTemplate = () => {
    return (
        <div>组件设置</div>
    )
}



export const FrontEditPage = ({ uuid, style, RenderEvent }) => {
    const { Theme } = style

    const [Active, setActive] = useState()

    RenderEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'openBox') {
            setActive(data)
        }
        if (type === 'closeBox') {
            setActive()
        }
    })


    useEffect(() => {
        // console.log('获取当前路由', uuid)
    }, [uuid])



    if (Theme) {
        const { BackTop, BackBtm, BackAbo } = Theme
        return (
            <div className='FrontEditPage'>
                <div className='Theme'>
                    <img className='ImageBack' src={url + Theme.BackUrl} alt="" />
                    {Theme.NavSwitch && <img className='ImageNav' style={{ height: Theme.NavHeight }} src={url + Theme.NavUrl} alt="" />}
                    {Theme.BtmSwitch && <img className='ImageBtm' style={{ height: Theme.BtmHeight }} src={url + Theme.BtmUrl} alt="" />}
                    {Theme.LeftSwitch &&
                        <img
                            className='ImageLeft'
                            src={url + Theme.LeftUrl}
                            style={{
                                transform: `rotateY(${Theme.LeftRotate ? 180 : 0}deg)`,
                                width: Theme.LeftWidth + '%',
                                height: Theme.LeftHeight + '%',
                                top: Theme.LeftTop + '%',
                                left: Theme.LeftMargin + '%',
                            }}
                            alt=""
                        />
                    }
                    {Theme.RightSwitch &&
                        <img
                            className='ImageRight'
                            src={url + Theme.RightUrl}
                            style={{
                                transform: `rotateY(${Theme.RightRotate ? 180 : 0}deg)`,
                                width: Theme.RightWidth + '%',
                                height: Theme.RightHeight + '%',
                                top: Theme.RightTop + '%',
                                right: Theme.RightMargin + '%',
                            }}
                            alt=""
                        />
                    }
                </div>
                <div className='Padding PT' style={{ height: BackTop }} />
                <div className='Padding PB' style={{ height: BackBtm }} />
                <div className='Padding PL' style={{ width: BackAbo }} />
                <div className='Padding PR' style={{ width: BackAbo }} />
                <div className='Body' style={{ left: BackAbo, right: BackAbo, top: BackTop, bottom: BackBtm }}>
                    内容信息
                </div>

                {Active &&
                    <div className='EditBox'>
                        {Active === 'EditWindowData' && <EditWindowData />}
                        {Active === 'EditWindowLayer' && <EditWindowLayer />}
                        {Active === 'EditWindowTemplate' && <EditWindowTemplate />}
                    </div>
                }
            </div>
        )
    }
}